<template>
	<view>
		<view class="classification">
			<view class="nr">
				<ul class="ul">
					<li class="li" v-for="item in list " :key="item.id" @click="xq(item.id)">
						<view class="left">
							<image :src="item.img" mode=""></image>
						</view>
						<view class="right">
							<view class="top">
								<view class="b">{{item.text}}</view>
							</view>
							<view class="bottom">
								<view class="l">
									{{item.price}}
								</view>
								<view class="r">
									好评率94%
								</view>
							</view>
						</view>
					</li>
				</ul>
			</view>
		</view>
	</view>
</template>

<script setup>
// vue3小程序生命周期函数
import { onShareAppMessage, onLoad, onShow, onHide } from '@dcloudio/uni-app';
import { give } from '/api/modules/orderGood.js'
import { reactive, toRefs } from 'vue'
const state = reactive({ list: [],classify:'' })
// 页面加载
onLoad((options) => {
	state.classify = options.classify
	fw()
})

const fw = async () => {
		const data  = await give(state)
		state.list = data
	} 
	
const xq = (id) => {
	uni.navigateTo({
		url: `../details/details?id=${id}`
	})
}
// 页面显示
onShow(() => {
	
})

// 页面隐藏
onHide(() => {
	
})

// 页面分享(不定义该函数 页面将无法分享)
onShareAppMessage(() => {
	
})

const { list, classify } = toRefs(state)
</script>

<style lang="scss">
.classification {
	padding: 0 40rpx;
	.nr {
		margin-top: 40rpx;
		.ul {
			.li {
				margin: 40rpx 0;
				display: flex;
				.left {
					width: 300rpx;
					height: 200rpx;
					margin-right: 20rpx;
					image {
						width: 100%;
						height: 100%;
					}
				}
				.right {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					.top {
						.b {
							color: #ccc;
							font-size: 24rpx;
							width: 300rpx;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}
					}
					.bottom {
						width: 340rpx;
						display: flex;
						justify-content: space-between;
						.l {
							color: red;
						}
						.r {
							font-size: 24rpx;
							color: #ccc;
						}
					}
				}
			}
		}
	}
}
</style>
